<!DOCTYPE html>
<!–suppress ThymeleafVariablesResolveInspection –>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="登录"></title>
    <link th:href="@{/css/bootstrap/4.1.1/bootstrap.min.css}" rel="stylesheet"/>

    <link th:href="@{/assets/css/reset.css}" rel="stylesheet"/>
    <link th:href="@{/assets/css/style.css}" rel="stylesheet"/>
    <link th:href="@{/assets/css/supersized.css}" rel="stylesheet"/>
    <script th:src="@{/assets/js/jquery-1.8.2.min.js}"></script>
    <script th:src="@{/assets/js/supersized.3.2.7.min.js}"></script>
    <script th:src="@{/assets/js/supersized-init.js}"></script>


    <link th:href="@{/css/spop/spop.css}" rel="stylesheet"/>
    <script th:src="@{/js/spop/spop.js}"></script>
</head>
<script th:inline="javascript">
    /*<![CDATA[*/
    if (window != top){
        top.location.href = window.location.href;
    }

    var basePath = /*[[${#httpServletRequest.getScheme() + "://" + #httpServletRequest.getServerName() + ":" + #httpServletRequest.getServerPort() + #httpServletRequest.getContextPath()}]]*/ 'basepath';

    $(function () {
        $("#kaptcha").click(function () {
            $(this).hide().attr("src", basePath + "/kaptcha?" + Math.random() * 100).fadeIn();
        });
        var loginError = [[${loginError}]];
        if(loginError != null){
            spop({
                template: loginError,
                position  : 'top-center',
                style: 'error',
                autoclose: 3000
            });
        }
    });

    function login(){
        var message = "";
        var kaptchaCode = $("input[name='kaptchaCode']:eq(0)").val();
        if(kaptchaCode == ""){
            message ="请输入验证码";
        }
        var password = $("input[name='password']:eq(0)").val();
        if(password == ""){
            message ="请输入密码";
        }
        var username = $("input[name='username']:eq(0)").val();
        if(username == ""){
            message ="请输入用户名";
        }



        if(message != ""){
            spop({
                template: message,
                position  : 'top-center',
                style: 'error',
                autoclose: 3000
            });
            return false;
        }

        $("#login").submit();
    }



    /*]]>*/


</script>
<body>
<div class="page-container">

    <form th:id="login" action="/login" method="post">

        <input type="text" name="username" autocomplete="off" placeholder="用户名">

        <input type="password" name="password"  placeholder="密码">

        <div class="input-group mb-3" style="margin-left: 20px;;">
            <input type="text" th:id="kaptchaCode" th:name="kaptchaCode" autocomplete="off"  class="kaptcha" placeholder="验证码">
            <div class="input-group-prepend">
                <img th:id="kaptcha" th:name="kaptcha" th:src="@{/kaptcha}"
                     style="width: 130px;height: 49px;margin-left: 0px;margin-top: 10px"/><br/>
            </div>
        </div>
        <div class="form-group custom-control custom-checkbox mb-6" style="margin-left: 20px;;">
            <input type="checkbox" class="custom-control-input" id="rememberMe" name="rememberMe">
            <label class="custom-control-label" for="rememberMe" style="margin-left: -220px;margin-top: 4px;;">记住我</label>
        </div>
        <button  style="width: 270px;" th:onclick="'javascript:login()'">登录</button>
    </form>



</div>

</body>
</html>